1"use client";
2
3
10import { useState } from "react";
11import { useParams, useRouter } from "next/navigation";
12import { useMutation } from "@tanstack/react-query";
13import { ArrowLeft, Loader2, Plus } from "lucide-react";
14import { toast } from "@/stores/ui-store";
15import { apiFetch } from "@/lib/api";
16import { useWorkspace } from "@/hooks/use-workspace";
17import { SettingsShell, Section, Field, inputCls } from "@/components/settings/settings-shell";
18import type { AutomationDetail } from "@/components/automations/lib";
19
20export default function NewAutomationPage() {
21 const params = useParams<{ workspace: string }>();
22 const slugOrId = params?.workspace ?? "";
23 const router = useRouter();
24 const { data: ws, isLoading } = useWorkspace(slugOrId);
25 const wid = ws?.id ?? "";
26
27 const [name, setName] = useState("");
28 const [description, setDescription] = useState("");
29
30 const create = useMutation({
31 mutationFn: (input: { name: string; description?: string }) =>
32 apiFetch<AutomationDetail>(`/workspaces/${wid}/automations`, {
33 method: "POST",
34 body: { name: input.name, ...(input.description ? { description: input.description } : {}) }
35 }),
36 onSuccess: (res) => {
37 toast("success", "Automation created", "Add triggers and actions to make it run.");
38 router.push(`/w/${slugOrId}/settings/automations/${res.id}`);
39 },
40 onError: (err) => {
41 toast("error", "Could not create automation", err instanceof Error ? err.message : undefined);
42 }
43 });
44
45 return (
46 <SettingsShell title="New automation" description="Create a draft, then configure triggers and actions." active="automations">
47 {isLoading || !ws ? (
48 <p className="text-sm text-muted-foreground">Loading…</p>
49 ) : (
50 <Section title="Details" description="You'll configure triggers, conditions and actions on the next step.">
51 <div className="space-y-3">
52 <Field label="Name" hint="1–100 characters.">
53 <input
54 className={inputCls}
55 placeholder="e.g. Triage new tickets"
56 value={name}
57 onChange={(e) => setName(e.target.value)}
58 maxLength={100}
59 />
60 </Field>
61 <Field label="Description (optional)" hint="Up to 500 characters.">
62 <textarea
63 className={`${inputCls} min-h-20`}
64 placeholder="What should this automation do?"
65 value={description}
66 onChange={(e) => setDescription(e.target.value)}
67 maxLength={500}
68 />
69 </Field>
70 <div className="flex items-center gap-2 pt-1">
71 <button
72 type="button"
73 className="inline-flex items-center gap-1 rounded-md border px-2.5 py-1.5 text-sm text-muted-foreground hover:text-foreground"
74 onClick={() => router.back()}
75 >
76 <ArrowLeft className="size-4" /> Back
77 </button>
78 <button
79 type="button"
80 className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
81 disabled={!name.trim() || create.isPending}
82 onClick={() =>
83 create.mutate({ name: name.trim(), ...(description.trim() ? { description: description.trim() } : {}) })
84 }
85 >
86 {create.isPending ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
87 Create & continue
88 </button>
89 </div>
90 </div>
91 </Section>
92 )}
93 </SettingsShell>
94 );
95}
96
